<template>
  <el-dialog
    v-model="visible"
    title="帮助中心"
    width="800px"
    :before-close="handleClose">
    
    <div class="help-content">
      <div class="help-sidebar">
        <el-menu
          :default-active="activeSection"
          @select="handleSectionSelect"
          class="help-menu">
          <el-menu-item index="getting-started">
            <el-icon><Guide /></el-icon>
            快速开始
          </el-menu-item>
          <el-menu-item index="data-import">
            <el-icon><Upload /></el-icon>
            数据导入
          </el-menu-item>
          <el-menu-item index="data-cleaning">
            <el-icon><Operation /></el-icon>
            数据清洗
          </el-menu-item>
          <el-menu-item index="data-modeling">
            <el-icon><Connection /></el-icon>
            数据建模
          </el-menu-item>
          <el-menu-item index="report-design">
            <el-icon><Grid /></el-icon>
            报表设计
          </el-menu-item>
          <el-menu-item index="shortcuts">
            <el-icon><Keyboard /></el-icon>
            快捷键
          </el-menu-item>
          <el-menu-item index="faq">
            <el-icon><QuestionFilled /></el-icon>
            常见问题
          </el-menu-item>
        </el-menu>
      </div>
      
      <div class="help-main">
        <div v-show="activeSection === 'getting-started'" class="help-section">
          <h2>快速开始</h2>
          <div class="steps">
            <el-steps :active="0" direction="vertical">
              <el-step title="导入数据" description="支持Excel、CSV等格式文件">
                <template #icon>
                  <el-icon><Upload /></el-icon>
                </template>
              </el-step>
              <el-step title="清洗数据" description="处理空值、重复数据和异常值">
                <template #icon>
                  <el-icon><Operation /></el-icon>
                </template>
              </el-step>
              <el-step title="建立模型" description="创建表关系和计算字段">
                <template #icon>
                  <el-icon><Connection /></el-icon>
                </template>
              </el-step>
              <el-step title="设计报表" description="拖拽创建可视化图表">
                <template #icon>
                  <el-icon><Grid /></el-icon>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
        
        <div v-show="activeSection === 'data-import'" class="help-section">
          <h2>数据导入</h2>
          <div class="help-content-text">
            <h3>支持的文件格式</h3>
            <ul>
              <li><strong>Excel文件</strong>：.xlsx, .xls</li>
              <li><strong>CSV文件</strong>：.csv</li>
              <li><strong>JSON文件</strong>：.json</li>
            </ul>
            
            <h3>导入步骤</h3>
            <ol>
              <li>点击"数据清洗"进入数据处理页面</li>
              <li>点击"导入数据"按钮</li>
              <li>选择或拖拽文件到上传区域</li>
              <li>预览数据并确认导入</li>
            </ol>
            
            <el-alert
              title="提示"
              type="info"
              description="文件大小限制为10MB，建议数据行数不超过10万行以确保最佳性能。"
              show-icon
              :closable="false" />
          </div>
        </div>
        
        <div v-show="activeSection === 'data-cleaning'" class="help-section">
          <h2>数据清洗</h2>
          <div class="help-content-text">
            <h3>清洗操作</h3>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="删除空行">移除所有字段都为空的数据行</el-descriptions-item>
              <el-descriptions-item label="去除重复">删除完全重复的数据记录</el-descriptions-item>
              <el-descriptions-item label="填充空值">用指定值或统计值填充空白字段</el-descriptions-item>
              <el-descriptions-item label="标准化文本">统一文本格式，去除多余空格</el-descriptions-item>
              <el-descriptions-item label="数据验证">检查邮箱、日期等格式是否正确</el-descriptions-item>
            </el-descriptions>
            
            <h3>质量评估</h3>
            <p>系统会自动评估数据质量，包括：</p>
            <ul>
              <li><strong>完整性</strong>：非空值的比例</li>
              <li><strong>一致性</strong>：数据格式的统一程度</li>
              <li><strong>有效性</strong>：数据类型匹配度</li>
              <li><strong>唯一性</strong>：重复数据的比例</li>
            </ul>
          </div>
        </div>
        
        <div v-show="activeSection === 'shortcuts'" class="help-section">
          <h2>快捷键</h2>
          <div class="shortcuts-grid">
            <div class="shortcut-group">
              <h3>通用操作</h3>
              <div class="shortcut-item">
                <kbd>Ctrl</kbd> + <kbd>S</kbd>
                <span>保存</span>
              </div>
              <div class="shortcut-item">
                <kbd>Ctrl</kbd> + <kbd>Z</kbd>
                <span>撤销</span>
              </div>
              <div class="shortcut-item">
                <kbd>Ctrl</kbd> + <kbd>Y</kbd>
                <span>重做</span>
              </div>
            </div>
            
            <div class="shortcut-group">
              <h3>报表设计</h3>
              <div class="shortcut-item">
                <kbd>Delete</kbd>
                <span>删除选中元素</span>
              </div>
              <div class="shortcut-item">
                <kbd>Ctrl</kbd> + <kbd>C</kbd>
                <span>复制</span>
              </div>
              <div class="shortcut-item">
                <kbd>Ctrl</kbd> + <kbd>V</kbd>
                <span>粘贴</span>
              </div>
            </div>
          </div>
        </div>
        
        <div v-show="activeSection === 'faq'" class="help-section">
          <h2>常见问题</h2>
          <el-collapse>
            <el-collapse-item title="为什么我的数据导入失败？" name="1">
              <p>可能的原因：</p>
              <ul>
                <li>文件格式不支持</li>
                <li>文件大小超过限制（10MB）</li>
                <li>文件内容格式错误</li>
                <li>文件损坏或无法读取</li>
              </ul>
            </el-collapse-item>
            
            <el-collapse-item title="如何提高大数据集的处理性能？" name="2">
              <p>建议：</p>
              <ul>
                <li>启用虚拟滚动（在偏好设置中）</li>
                <li>分批处理大数据集</li>
                <li>使用筛选器减少显示的数据量</li>
                <li>关闭不必要的动画效果</li>
              </ul>
            </el-collapse-item>
            
            <el-collapse-item title="如何保存和分享我的报表？" name="3">
              <p>保存和分享选项：</p>
              <ul>
                <li>点击"保存报表"按钮保存到本地</li>
                <li>使用"导出"功能生成PDF或图片</li>
                <li>复制报表链接分享给他人</li>
                <li>导出数据为Excel或CSV格式</li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="openDocumentation">查看完整文档</el-button>
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { 
  Guide, 
  Upload, 
  Operation, 
  Connection, 
  Grid,
  QuestionFilled 
} from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

// 响应式数据
const visible = ref(false)
const activeSection = ref('getting-started')

// 监听器
watch(() => props.modelValue, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

// 方法
const handleClose = () => {
  visible.value = false
}

const handleSectionSelect = (section) => {
  activeSection.value = section
}

const openDocumentation = () => {
  window.open('https://docs.example.com', '_blank')
}
</script>

<style scoped>
.help-content {
  display: flex;
  height: 500px;
}

.help-sidebar {
  width: 200px;
  border-right: 1px solid var(--el-border-color);
}

.help-menu {
  border-right: none;
}

.help-main {
  flex: 1;
  padding: 0 24px;
  overflow-y: auto;
}

.help-section h2 {
  margin: 0 0 24px 0;
  color: var(--el-text-color-primary);
  font-size: 24px;
  font-weight: 600;
}

.help-section h3 {
  margin: 24px 0 12px 0;
  color: var(--el-text-color-primary);
  font-size: 18px;
  font-weight: 600;
}

.help-content-text {
  line-height: 1.6;
  color: var(--el-text-color-regular);
}

.help-content-text ul,
.help-content-text ol {
  padding-left: 20px;
}

.help-content-text li {
  margin-bottom: 8px;
}

.steps {
  margin-top: 24px;
}

.shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.shortcut-group h3 {
  margin: 0 0 16px 0;
  color: var(--el-text-color-primary);
  font-size: 16px;
  font-weight: 600;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.shortcut-item:last-child {
  border-bottom: none;
}

kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--el-fill-color-light);
  border: 1px solid var(--el-border-color);
  border-radius: 3px;
  font-size: 12px;
  font-family: monospace;
  color: var(--el-text-color-primary);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
